<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 800px;
            height: 700px;
            margin: auto;
            box-shadow: 0 2px 0 1px rgb(0 0  0 /20%);
        }
        .header{
            text-align: center;
            border-bottom: 2px solid;
            height: 100px;
        }
        input{
            width: 60%;
            height: 30px;
            text-indent: 1em;
            border-radius: 5px;
            outline: none;
            margin-bottom:5px;
        }
        .list{
            width: 95%;
            height: 40px;
            display: flex;
            /* justify-content: space-between; */
            background-color: gray;
            margin: auto;
            position: relative;
            border-bottom: 2px solid rgb(201, 206, 220);
        }
        .not{
            position: absolute;
            right: 0;
            width: 40px;
            height: 40px;
            background-color: tan;
        }
        .ye{
            width: 40px;
            height: 40px;
            display: none;
        }
            p{
                margin-left: 50px;
            }
        .true p{
            text-decoration: line-through;
        }

    </style>
    <script src="../day6jquery/jquery3.5.min.js"></script>
</head>
<body>
    <div class="box">
        <div class="header">
            <h3>任务</h3>
            <input placeholder="请输入任务"/>
            <button>添加任务</button>
        </div>
        <div class="box-body"></div>
    </div>
    <script>
        let input = $('input');
        let button = $('button');
        let lis = $('.box-body');
        var arr =[];
        console.log('===>', localStorage.getItem('list'));
        let nArr = localStorage.getItem('list');
        console.log(nArr);
        if(nArr){  
            arr = JSON.parse(nArr)
        }


        init()
        function init(){
            //清空数组内原有的值，重新将内容渲染到页面
            lis.empty()
            for(var i = 0; i < arr.length; i++){
                lis.append('<div class="list"  class="item'+ i +'">'+
                    '<span  class="ye ' + i + '">✔</span>'+
                    '<p  onclick="change('+ i +')" >'+ arr[i] +'</p>'+
                    '<span onclick="dele('+i+')" class="not ' +i+ '">x</span>'+
                    '</div>')
            }
            arr[i].setAttribute('index',i)
        }
        function change(index){
            let span = $('.ye',index)
            let p = $('.p',index);
            let list = $('list'+index)
            let state = span.css('display')
            if(state == 'none'){
                span.css('display','block');
                p.attr('class','p true');
            }else{
                span.css('display','none')
            }
        }
        function dele(index){
            console.log(1111);
           arr.splice(index,1);
           localStorage.setItem('list',JSON.stringify(arr))
           init()
        }
        function add(){
            let result = input.val();
            if(!result){
                alert('请先输入内容')
                return
            }
            //判断input框内输入的值在任务列表内是否存在，存在就执行以下代码，不存在就跳出这个直接执行下面的代码
            //indexOf是判断数组内是否存在相同的元素 如果存在就会返回1 不存在就会返回-1
            if(arr.indexOf(result) !== -1){
                alert('任务已存在');
                return
            }
            //将input框内的内容push到数组里面， 然后回车的时候将数组内容追加渲染到数组内
            arr.push(result);
            localStorage.setItem('list', JSON.stringify(arr));
            init();
            //清空input框内容
            input.val('');
        }
        button.click(add);
        input.keydown(function(e){
            if(e.keyCode==13){
                add()
            }
        })
    </script>
</body>
</html>